
import React from "react";
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Building,
  Users,
  Phone,
  Edit,
  Trash2,
  Hammer,
  Eye,
  Settings,
  Wrench,
  Truck,
  UserCheck
} from "lucide-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";


export default function OperationalUnitCard({ unit, onEdit, onDelete }) {
  const getUnitTypeConfig = (type) => {
    const configs = {
      constructionUnit: {
        color: "bg-blue-100 text-blue-700",
        icon: <Hammer className="w-4 h-4" />,
        label: "施工单位"
      },
      designUnit: {
        color: "bg-green-100 text-green-700",
        icon: <Eye className="w-4 h-4" />,
        label: "设计单位"
      },
      supervisionUnit: {
        color: "bg-purple-100 text-purple-700",
        icon: <Settings className="w-4 h-4" />,
        label: "监理单位"
      }
    };
    return configs[type] || configs.constructionUnit;
  };

  const typeConfig = getUnitTypeConfig(unit.type);

  const personnelCount = unit.personnel_resources?.reduce((sum, r) => sum + (r.quantity || 0), 0) || 0;
  const machineryCount = unit.machinery_resources?.reduce((sum, r) => sum + (r.quantity || 0), 0) || 0;
  const toolCount = unit.tool_resources?.reduce((sum, r) => sum + (r.quantity || 0), 0) || 0;

  const ResourceDetail = ({ resources, headers }) => (
    <div className="text-xs text-gray-600 space-y-1">
      {resources && resources.length > 0 ? (
        resources.map((resource, index) => (
          <div key={index} className="grid grid-cols-3 gap-2 even:bg-gray-50/50 p-1 rounded">
            <span>{resource[headers[0].key]}</span>
            <span className="text-center">{resource[headers[1].key]}</span>
            <span className="text-right">{resource[headers[2].key]}</span>
          </div>
        ))
      ) : <p className="text-center text-gray-400 p-2">暂无数据</p>}
    </div>
  );

  return (
    <Card className="hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between">
      <div>
        <CardHeader className="pb-3">
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <CardTitle className="text-lg font-semibold text-gray-900 mb-2">
                {unit.name}
              </CardTitle>
              <Badge className={`${typeConfig.color} flex items-center gap-1 w-fit`}>
                {typeConfig.icon}
                {typeConfig.label}
              </Badge>
            </div>
            <div className="flex gap-1">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => onEdit(unit)}
                className="h-8 w-8 text-gray-400 hover:text-gray-600"
              >
                <Edit className="w-4 h-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                onClick={() => onDelete(unit.id)}
                className="h-8 w-8 text-gray-400 hover:text-red-600"
              >
                <Trash2 className="w-4 h-4" />
              </Button>
            </div>
          </div>
        </CardHeader>

        <CardContent className="pt-0">
          <div className="space-y-3">
            {/* Resource Capacity */}
            {unit.resource_capacity && (
              <div className="space-y-2">
                <h4 className="text-sm font-medium text-gray-700 flex items-center gap-2">
                  <Users className="w-4 h-4" />
                  总体承载能力
                </h4>
                <div className="bg-gray-50 p-3 rounded-md space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-gray-600">最大并行施工队：</span>
                    <span className="font-medium">{unit.resource_capacity.max_concurrent_teams || '-'} 队</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">最大管理项目：</span>
                    <span className="font-medium">{unit.resource_capacity.max_projects || '-'} 个</span>
                  </div>
                </div>
              </div>
            )}
             {/* Contact Info */}
             {(unit.contact_person || unit.contact_phone) && (
              <div className="pt-2 border-t">
                <div className="space-y-1">
                  {unit.contact_person && (
                    <div className="flex items-center text-sm text-gray-600">
                      <UserCheck className="w-4 h-4 mr-2 text-gray-400" />
                      <span className="font-medium mr-2">联系人:</span>
                      <span>{unit.contact_person}</span>
                    </div>
                  )}
                  {unit.contact_phone && (
                    <div className="flex items-center text-sm text-gray-600">
                      <Phone className="w-4 h-4 mr-2 text-gray-400" />
                       <span className="font-medium mr-2">电话:</span>
                      <span>{unit.contact_phone}</span>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </CardContent>
      </div>

      <CardFooter className="p-0">
        <Accordion type="single" collapsible className="w-full px-4 pb-4">
          <AccordionItem value="item-1">
            <AccordionTrigger className="text-sm font-medium text-gray-800 hover:no-underline pt-2">
                详细资源 ({personnelCount}人, {machineryCount}台机械, {toolCount}件工具)
            </AccordionTrigger>
            <AccordionContent>
              <div className="space-y-4 pt-2">
                <div>
                  <h5 className="text-xs font-semibold text-gray-500 mb-1 flex items-center gap-1"><Users className="w-3 h-3"/>人力资源</h5>
                   <ResourceDetail
                    resources={unit.personnel_resources}
                    headers={[{key: 'trade', label: '工种'}, {key: 'quantity', label: '人数'}, {key: 'skill_level', label: '等级'}]}
                  />
                </div>
                 <div>
                  <h5 className="text-xs font-semibold text-gray-500 mb-1 flex items-center gap-1"><Truck className="w-3 h-3"/>机械设备</h5>
                  <ResourceDetail
                    resources={unit.machinery_resources}
                    headers={[{key: 'name', label: '名称'}, {key: 'quantity', label: '数量'}, {key: 'specification', label: '规格'}]}
                  />
                </div>
                <div>
                  <h5 className="text-xs font-semibold text-gray-500 mb-1 flex items-center gap-1"><Wrench className="w-3 h-3"/>工器具</h5>
                   <ResourceDetail
                    resources={unit.tool_resources}
                    headers={[{key: 'name', label: '名称'}, {key: 'quantity', label: '数量'}, {key: 'specification', label: '规格'}]}
                  />
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </CardFooter>
    </Card>
  );
}
